import React from 'react';
import { Tooltip } from 'antd';
import styles from './TableListItem.less';

const TableListItem = (props) => {
  const { item, columns, rightColumns = [], titleColumns = [] } = props;
  // baseColWidth = 'auto'
  return (
    <div className={styles.content} props={props}>
      <div className={styles.itembar}>
        <span className={styles.title}>
          {/* {item[titleName] || ''} */}
          {titleColumns.map((titleitem, index) => {
            const text = `${item[titleitem.dataIndex] || ''}`;
            if (titleitem.render) {
              return <span key={`${titleitem.dataIndex}${index}`}>{titleitem.render(text, item)}</span>;
            } else {
              return <span key={`${titleitem.dataIndex}${index}`}>{text}</span>
            }
          })}
        </span>
        <div>
          {rightColumns.map((baritem, index) => {
            const text = `${item[baritem.dataIndex] || ''}`;
            if (baritem.render) {
              // style={{ width: `${baseColWidth}%` }}
              return <span key={`${baritem.dataIndex}${index}`} className={styles.colitem}>{baritem.render(text, item)}</span>;
            } else {
              return <span key={`${baritem.dataIndex}${index}`} className={styles.colitem}>{text}</span>
            }
          })}
        </div>
      </div>
      <div className={styles.itemdetail}>
        {columns.map((colItem, index) => {
          const text = `${colItem.title || ''} ： ${item[colItem.dataIndex] || ''}`;
          const colItemClassName = colItem.width ? '' : styles.colItem__auto;
          if (colItem.render) {
            return (
              <span
                key={`${text}${index}`}
                className={`${styles.colitem} ${colItemClassName}`}
                style={{ width: colItem.width ? colItem.width : 0 }}
              >
                {colItem.render(text, item)}
              </span>
            )
          } else {
            return (
              <span
                key={`${text}${index}`}
                style={{ width: colItem.width ? colItem.width : 0 }}
                className={`${styles.colitem} ${colItemClassName}`}
              >
                {!colItem.hiddenTooltip ?
                  (
                    <Tooltip placement="top" title={item[colItem.dataIndex] || ''}>
                      <p className={styles.item__detail}>{`${colItem.title || ''}：${item[colItem.dataIndex] || ''}`}</p>
                    </Tooltip>
                  ) : (
                    <p className={styles.item__detail}>{`${colItem.title || ''}：${item[colItem.dataIndex] || ''}`}</p>
                  )}
                {/* <span>{`${colItem.title || ''}：`}</span> */}
                {/* <span className={styles.item__detail}>{item[colItem.dataIndex] || ''}</span> */}
              </span>
            )
          }
        })}
      </div>
    </div>
  );
}
export default TableListItem;